<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <style>
        body {
            background: #F2F2F2;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-title">用户管理,人员管理</div>
    <div class="page-main" :style="{height:(height)+'px'}">
        <div class="main-head">
            <el-form :inline="true" size="small">
                <el-form-item label="人员名称">
                    <el-input placeholder="请输入" class="inputW" v-model="userName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addChild">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="userData" :stripe="true" :border="true" size="mini" style="width: 100%">
            <el-table-column type="index" label="序号" width="50" align="center">
            </el-table-column>
            <el-table-column prop="userName" label="人员名称">
            </el-table-column>
            <el-table-column prop="Telephone" label="联系电话">
            </el-table-column>
            <el-table-column prop="GradeName" label="职位">
            </el-table-column>
            <el-table-column prop="DepartmentName" label="部门">
            </el-table-column>
            <el-table-column prop="cname" label="行业大类">
            </el-table-column>
            <el-table-column prop="isAccept" label="是否接受公文">
                <template slot-scope="scope">
                    <div v-if="scope.row.isAccept==0">
                        否
                    </div>
                    <div v-if="scope.row.isAccept==1">
                        是
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="editChild(scope.row)" round size="small" icon="el-icon-edit"></el-button>
                    <el-button icon="el-icon-delete" round size="small" @click="delBtn(scope.row.Id)"></el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="">
        <el-pagination background layout="prev, pager, next" :pagesize="pagesize" :total="totalCount"
                       :current-page.sync="pageno" @current-change="ChangePage">
        </el-pagination>
    </div>
    <el-dialog :title="editMod?'编辑用户':'新增用户'" :visible.sync="addFormVisible" width="45%">
        <el-card>
            <el-form label-width="80px" :model="childForm" ref="childForm">
                <el-form-item label="用户名"
                              prop="userName"
                              :rules="[
                                 {required:true,message:'请输入用户名,内容不能为空!',trigger:'blur'}
                          ]">
                    <el-input v-model="childForm.userName" style="width: 40%;"></el-input>
                </el-form-item>
                <template v-if="!editMod">
                    <el-form-item label="密码" prop="Password"
                                  :rules="[ {required:true,message:'请输入密码,内容不能为空!',trigger:'blur'}]">
                        <el-input type="password" v-model="childForm.Password" style="width: 40%;"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass"
                                  :rules="[  {required:true,message:'请输入密码,内容不能为空!',trigger:'blur'} ]">
                        <el-input v-model="childForm.checkPass" type="password" style="width: 40%;"></el-input>
                    </el-form-item>
                </template>

                <el-form-item label="姓名"
                              prop="nickName"
                              :rules="[
                                 {required:true,message:'请输入姓名,内容不能为空!',trigger:'blur'}
                          ]">
                    <el-input v-model="childForm.nickName" style="width: 40%;"></el-input>
                </el-form-item>

                <!--                <el-form-item label="所属公司">-->
                <!--                    <el-select v-model="childForm.Company" filterable placeholder="请选择公司"-->
                <!--                               style="width: 40%;">-->
                <!--                        <el-option-->
                <!--                                v-for="item in companyList"-->
                <!--                                :key="item.companyCode"-->
                <!--                                :label="item.companyName">-->
                <!--                        </el-option>-->
                <!--                    </el-select>-->
                <!--                </el-form-item>-->
                <!--                <el-form-item label="角色">-->
                <!--                    <el-select v-model="childForm.roleId" filterable placeholder="请选择角色"-->
                <!--                               style="width: 40%;">-->
                <!--                        <el-option-->
                <!--                                v-for="item in roleData"-->
                <!--                                :key="item.Id"-->
                <!--                                :label="item.roleName"-->
                <!--                                :value="item.Id">-->
                <!--                        </el-option>-->
                <!--                    </el-select>-->
                <!--                </el-form-item>-->
                <el-form-item label="部门">
                    <el-select v-model="childForm.departmentId" filterable placeholder="请选择部门"
                               style="width: 40%;">
                        <el-option
                                v-for="item in DepartmentData"
                                :key="item.DepartmentID"
                                :label="item.DepartmentName"
                                :value="item.DepartmentID">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="职位等级">
                    <el-select v-model="childForm.titleGrade" filterable placeholder="请选择职位等级" style="width: 40%;">
                        <el-option
                                v-for="item in titleGradeData"
                                :key="item.Id"
                                :label="item.GradeName"
                                :value="item.Id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="行业大类">
                    <el-select v-model="childForm.catigory" filterable placeholder="请选择职位等级" style="width: 40%;">
                        <el-option
                                v-for="item in BusinessList"
                                :key="item.cid"
                                :label="item.cname"
                                :value="item.cid">
                        </el-option>
                    </el-select>
                </el-form-item>

                <!--                <el-form-item label="工种">-->
                <!--                    <el-select v-model="childForm.workType" filterable placeholder="请选择工种"-->
                <!--                               style="width: 40%;">-->
                <!--                        <el-option-->
                <!--                                v-for="item in WorkData"-->
                <!--                                :key="item.Id"-->
                <!--                                :label="item.workName"-->
                <!--                                :value="item.Id">-->
                <!--                        </el-option>-->
                <!--                    </el-select>-->
                <!--                </el-form-item>-->
                <el-form-item label="联系电话">
                    <el-input type="tel" v-model="childForm.Telephone" style="width: 40%;"></el-input>
                </el-form-item>
                <el-form-item label="是否推送">
                    <el-radio v-model="childForm.isAccept" label="0" value="0" name="Accept">否</el-radio>
                    <el-radio v-model="childForm.isAccept" label="1" value="1" name="Accept">是</el-radio>
                </el-form-item>
            </el-form>
        </el-card>
        <br/>
        <span slot="footer" class="dialog-footer">
          <el-button style="text-align: center" @click="cancleChild()">取消</el-button>
          <el-button type="primary" @click="submitChild()" style="text-align: center">确定</el-button>
         </span>
    </el-dialog>
</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>


<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            userForm: {},
            childForm: {},
            addFormVisible: false,
            editMod: false,
            currentId: '',
            expandId: '',
            selectUid: '',
            number: 0,
            roleData: [],
            companyList: [],
            child: [],
            WorkData: [],
            DepartmentData: [],
            titleGradeData: [
                {GradeName: '局长', Id: 0},
                {GradeName: '分管局长', Id: 1},
                {GradeName: '分管科长', Id: 2},
                {GradeName: '普通职员', Id: 3}
            ],
            defaultProps: {
                label: 'Text',
                id: 'Id',
            },
            devTree: '',   //树形数据
            height: 500,
            filterText: '',
            pagesize: 10,
            pageno: 1,
            totalCount: 0,
            userData: [],
            BusinessList: [],
            userName: ''

        },
        methods: {

            filterNode(value, data) {
                if (!value) return true;
                return data.Text.indexOf(value) !== -1;
            },
            proNode: function (data) {
                this.currentId = data.Id.split("_")[1];
                if (data.Id.split("_")[0] == 'U') {
                    this.editMod = true;
                    this.getUserDetail({Id: data.Id.split("_")[1]});
                    this.selectUid = data.Id.split("_")[1];
                    HttpUtil.get('User/Parent', {Id: data.Id.split("_")[1]}).success((res) => {
                        for (var ind in res.data) {
                            res.data[ind].Id += '';
                        }
                        this.child = res.data;
                    })
                } else {
                    this.editMod = false;
                    this.userForm = {};
                }
            },
            //递归成树形数据
            parseTree(data, pid) {
                const result = []
                let temp = []
                for (let i = 0; i < data.length; i++) {
                    if (data[i].ParentId === pid) {
                        const obj = data[i]
                        if (parseInt(obj.Type - 110) == 2) {
                            obj.icon = 'el-icon-s-home';

                        } else if (parseInt(obj.Type - 110) == 3) {
                            obj.icon = 'el-icon-s-custom'
                        } else {
                            obj.icon = 'el-icon-menu'
                        }
                        temp = this.parseTree(data, data[i].Id)


                        // temp = this.parseTree(data, data[0].Id)


                        if (temp.length > 0) {
                            obj.children = temp
                        }
                        result.push(obj)
                    }
                }
                return result
            },
            delBtn(id) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    if (SiteConfig.account.id == id) {
                        this.$message({
                            type: 'error',
                            message: '无法删除总账户'
                        });
                        return;
                    }
                    HttpUtil.get('User/GovDelete', {Id: id}).success((res) => {
                        if (res.state == 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                            this.getUserList();
                        } else {
                            this.$message({
                                type: 'error',
                                message: '删除失败'
                            })
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            saveBtn() {
                this.$refs.userForm.validate((valid) => {
                    if (valid) {
                        if (!(/^1[3456789]\d{9}$/.test(this.userForm.Telephone))) {
                            this.$message({
                                type: 'error',
                                message: '手机号码有误，请重填'
                            })
                            return;
                        }

                        HttpUtil.get('User/Update', this.userForm).success((res) => {
                            this.$message({
                                type: 'success',
                                message: '修改成功'
                            });
                            this.getUserList();
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '输入内容不能为空'
                        })
                    }
                });
            },
            editChild(row) {
                // this.childForm = row;
                this.childForm = {
                    Company: row.Company,
                    DepartmentName: row.DepartmentName,
                    Email: row.Email,
                    GradeName: row.GradeName,
                    Icon: row.Icon,
                    Id: row.Id,
                    Password: row.Password,
                    Regtime: row.Regtime,
                    Role: row.Role,
                    Telephone: row.Telephone,
                    catigory: row.catigory,
                    cname: row.cname,
                    departmentId: row.departmentId,
                    isAccept: row.isAccept,
                    isManage: row.isManage,
                    lastLoginDate: row.lastLoginDate,
                    lastLoginIP: row.lastLoginIP,
                    loginCounts: row.loginCounts,
                    loginStatus: row.loginStatus,
                    macIp: row.macIp,
                    major: row.major,
                    nickName: row.nickName,
                    openId: row.openId,
                    parentId: row.parentId,
                    serverDateLong: row.serverDateLong,
                    serverStartDate: row.serverStartDate,
                    tbluserId: row.tbluserId,
                    titleGrade: row.titleGrade,
                    traintime: row.traintime,
                    upClient: row.upClient,
                    userName: row.userName,
                    workType: row.workType,
                    worktitle: row.worktitle
                }

                this.childForm.checkPass = row.Password;
                this.childForm.isAccept = row.isAccept.toString();
                // this.childForm.departmentId = row.departmentId.toString();
                this.addFormVisible = true;
                this.editMod = true;
            },
            addChild() {
                this.addFormVisible = true;
                this.editMod = false;
            },
            checkPhone() {
                var phone = document.getElementById('phone').value;
                if (!(/^1[3456789]\d{9}$/.test(phone))) {
                    alert("手机号码有误，请重填");
                    return false;
                }
            },
            submitChild() {
                this.childForm.parentId = SiteConfig.account.id;
                this.childForm.Company = SiteConfig.account.CompanyCode;
                this.childForm.Role = 11;
                this.childForm.roleId = 11
                this.$refs.childForm.validate((valid) => {
                    if (valid) {
                        if (this.childForm.Password !== this.childForm.checkPass) {
                            this.$message({
                                type: 'error',
                                message: '密码不一致'
                            })
                        } else if (!(/^1[3456789]\d{9}$/.test(this.childForm.Telephone))) {
                            this.$message({
                                type: 'error',
                                message: '手机号码有误，请重填'
                            })
                        } else {
                            if (this.editMod) {
                                HttpUtil.get('User/GovUpdate', this.childForm).success((res) => {
                                    this.$message({
                                        type: 'success',
                                        message: '修改成功'
                                    });
                                    this.addFormVisible = false;
                                    this.childForm = {};
                                    this.getUserList();
                                })
                            } else {
                                HttpUtil.get('User/GovAdd', this.childForm).success((res) => {
                                    if (res.state == 0) {
                                        this.addFormVisible = false;
                                        this.childForm = {};
                                        this.getUserList();
                                        this.$message({
                                            type: 'success',
                                            message: '增加成功！'
                                        });
                                    } else {
                                        this.$message({
                                            type: 'error',
                                            message: res.errMsg
                                        });
                                    }

                                })
                            }
                        }
                    } else {
                        this.$message({
                            type: 'error',
                            message: '输入内容不能为空'
                        })
                    }
                });
            },
            cancleChild() {
                this.childForm = {};
                this.addFormVisible = false;
            },
            getUserDetail(params) {
                HttpUtil.get('User/Detail', params).success((res) => {
                    this.userForm = res.data[0];
                    this.userForm.parentId += '';
                })
            },
            search: function () {
                this.getUserList();
            },
            ChangePage(page) {
                this.pageno = page;
                this.getUserList();
            },
            getUserList() {
                var param = {};
                if (this.userName)
                    param.userName = this.userName;
                param.UserId = SiteConfig.account.id;
                param.pageno = this.pageno;
                param.pagesize = this.pagesize;
                HttpUtil.get('User/getGovUser', param).success((res) => {
                    if (res.state == 0) {
                        var userData = res.data;
                        this.totalCount = res.total;
                        // var companyList = this.companyList;
                        // var roleData = this.roleData;
                        // var WorkData = this.WorkData;
                        var DepartmentData = this.DepartmentData;
                        var titleGradeData = this.titleGradeData;
                        var BusinessListData = this.BusinessList;
                        // for (var i = 0; i < userData.length; i++) {
                        //     for (var j = 0; j < companyList.length; j++) {
                        //         if (userData[i].Company == companyList[j].companyCode) {
                        //             userData[i].companyName = companyList[j].companyName;
                        //         }
                        //     }
                        // }
                        for (var i = 0; i < userData.length; i++) {
                            for (var j = 0; j < DepartmentData.length; j++) {
                                if (userData[i].departmentId == DepartmentData[j].DepartmentID) {
                                    userData[i].DepartmentName = DepartmentData[j].DepartmentName;
                                }
                            }
                        }

                        for (var i = 0; i < userData.length; i++) {
                            for (var j = 0; j < titleGradeData.length; j++) {
                                if (userData[i].titleGrade == titleGradeData[j].Id) {
                                    userData[i].GradeName = titleGradeData[j].GradeName;
                                }
                            }
                        }

                        for (var i = 0; i < userData.length; i++) {
                            for (var j = 0; j < BusinessListData.length; j++) {
                                if (userData[i].catigory == BusinessListData[j].cid) {
                                    userData[i].cname = BusinessListData[j].cname;
                                }
                            }
                        }

                        // for (var i = 0; i < userData.length; i++) {
                        //     for (var j = 0; j < roleData.length; j++) {
                        //         if (userData[i].Role == roleData[j].Id) {
                        //             userData[i].roleName = roleData[j].roleName;
                        //         }
                        //     }
                        // }
                        this.userData = userData;
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.errMsg
                        })
                    }
                });
            },
            // getUserList() {
            //     HttpUtil.get('User/getUserTree', {
            //         UserId: SiteConfig.account.id,
            //         level: 0,
            //         zoneType: 3,
            //         energyType: 'Total'
            //     }).success((res) => {
            //         this.devTree = this.parseTree(res.data, 'U_0');
            //     });
            // }
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        created: function () {
            this.height = window.innerHeight - 45;
            this.getUserList();
            HttpUtil.get('Department/List', {UserId: SiteConfig.account.id}).success((r) => {
                if (r.state == 0) {
                    vuePage.DepartmentData = r.data;
                }
            })
            HttpUtil.get('CodeController/BusinessList').success((r) => {
                if (r.state == 0) {
                    vuePage.BusinessList = r.data;
                }
            })
            // HttpUtil.get('WorkType/List', {pagesize: 1000}).success((r) => {
            //     if (r.state == 0) {
            //         vuePage.WorkData = r.data;
            //     }
            // })
            // HttpUtil.get('Company/List').success((res) => {
            //     this.companyList = res.data;
            // });
            // HttpUtil.get('role/list').success((res) => {
            //     for (var ind in res.data) {
            //         res.data[ind].Id += '';
            //     }
            //     this.roleData = res.data
            // });

        },
        mounted: function () {

        }
    });


</script>

</body>
</html>
